<template>
    <div class="yimaiSmartCart">
        <el-date-picker class="time-select" @change="refresh" v-model="time" type="daterange" align="right"
            placeholder="选择日期范围" :picker-options="pickerOptions">
        </el-date-picker>
        <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="数据概况" name="first"></el-tab-pane>
            <!-- <el-tab-pane label="用户画像" name="second"></el-tab-pane> -->
        </el-tabs>
        <div :style="{ height: activeName === 'first' ? 'auto' : 0, overflow: 'hidden' }">
            <div class="page-params">
                <div class="params-item" v-for="(item, index) in page_params" :key="index">
                    <div class="icon">
                        <i :class="item.icon"></i>
                    </div>
                    <div class="params-item-num">{{ item.num }}</div>
                    <div class="params-item-name">{{ item.name }}</div>
                </div>
            </div>
            <div class="page-echarts" :span="24">
                <div class="days-select">
                    <div>
                        用户增长情况
                    </div>
                    <div>
                        <el-radio-group v-model="days1" @change="days1Change">
                            <el-radio-button label="7">近7天</el-radio-button>
                            <el-radio-button label="15">近15天</el-radio-button>
                            <el-radio-button label="30">近30天</el-radio-button>
                        </el-radio-group>
                    </div>
                </div>
                <div id="chartLine1" style="width:100%; height:400px;"></div>
            </div>
            <div class="page-echarts" :span="24">
                <div class="days-select">
                    <div>
                        用户人数增长情况
                    </div>
                    <div>
                        <el-radio-group v-model="days2" @change="days2Change">
                            <el-radio-button label="7">近7天</el-radio-button>
                            <el-radio-button label="15">近15天</el-radio-button>
                            <el-radio-button label="30">近30天</el-radio-button>
                        </el-radio-group>
                    </div>
                </div>
                <div id="chartLine2" style="width:100%; height:400px;"></div>
            </div>
        </div>
        <div :style="{ height: activeName === 'second' ? 'auto' : 0, overflow: 'hidden' }">
            <div class="days-select">
                <div>
                    性别及年龄分布
                </div>
                <div>
                    <el-radio-group v-model="days3" @change="days3Change">
                        <el-radio-button label="7">近7天</el-radio-button>
                        <el-radio-button label="15">近15天</el-radio-button>
                        <el-radio-button label="30">近30天</el-radio-button>
                    </el-radio-group>
                </div>
            </div>
            <div class="sexAndAge">
                <div class="page-echarts" :span="24">
                    <div id="chartLine3" style="width:100%; height:430px;"></div>
                </div>
                <div class="page-echarts" :span="24">
                    <div id="chartLine4" style="width:100%; height:430px;"></div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import echarts from 'echarts'
import '../../../node_modules/echarts/map/js/china.js' // 引入中国地图数据
import { str2date } from '@/utils/util.js';
import { dataCenterApi, newUserCountListApi, userUseCountListApi, userSexCountApi } from '@/api/api.js';
export default {
    data() {
        return {
            days1: '7',
            days2: '7',
            days3: '7',
            days4: '7',
            activeName: 'first',
            time: '',
            pickerOptions: {
                shortcuts: [
                    {
                        text: '今天',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 0);
                            picker.$emit('pick', [start, end]);
                        }
                    },
                    {
                        text: '昨天',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 1);
                            end.setTime(end.getTime() - 3600 * 1000 * 24 * 1);
                            picker.$emit('pick', [start, end]);
                        }
                    },
                    {
                        text: '最近七天',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 6);
                            picker.$emit('pick', [start, end]);
                        }
                    }
                ]
            },
            page_params: [
                {
                    icon: 'fa fa-user-plus',
                    num: 'waiting……',
                    name: '新增使用人数',
                },
                {
                    icon: 'fa fa-user',
                    num: 'waiting……',
                    name: '使用人数',
                },
                {
                    icon: 'fa fa-users',
                    num: 'waiting……',
                    name: '总用户数',
                }
            ]
        }
    },
    created() {
        if (this.activeName === 'first') {
            this.time = [str2date(new Date()), str2date(new Date())]
            this.GetDataCenter();
            this.getNewUserCountList();
            this.getUseCountList();
        } else if (this.activeName === 'second') {
            this.getUserSexCount();
        }
    },
    mounted() {

    },
    methods: {
        // 点击刷新
        refresh() {
            this.GetDataCenter();
        },
        GetDataCenter() {
            let params = {
                companyType: '1',
                startTime: str2date(this.time[0]),
                endTime: str2date(this.time[1])
            }
            dataCenterApi(params).then(res => {
                this.page_params[0].num = res.data.newUserCount
                this.page_params[1].num = res.data.userCount
                this.page_params[2].num = res.data.allUserCount
            })
        },
        getNewUserCountList() {
            let params = {
                companyType: '1',
                days: this.days1
            }
            newUserCountListApi(params).then(res => {
                let x_data = []
                let newUseCountData = []
                res.data.forEach(item => {
                    x_data.push(item.date.slice(2))
                    newUseCountData.push(item.data)
                })
                this.drawLineChart(x_data, newUseCountData, 'chartLine1');
            })
        },
        getUseCountList() {
            let params = {
                companyType: '1',
                days: this.days2
            }
            userUseCountListApi(params).then(res => {
                let x_data = []
                let useCountData = []
                res.data.forEach(item => {
                    x_data.push(item.date.slice(2))
                    useCountData.push(item.data)
                })
                this.drawLineChart(x_data, useCountData, 'chartLine2');
            })
        },
        getUserSexCount() {
            let params = {
                companyType: '1',
                days: this.days3
            }
            userSexCountApi(params).then(res => {
                let userSexData = []
                res.data.forEach(item => {
                    if (item.gender === 1) {
                        userSexData.push({ name: '男', value: item.data })
                    } else if (item.gender === 2) {
                        userSexData.push({ name: '女', value: item.data })
                    }
                })
                this.drawLineChart2(userSexData);
            })
        },
        drawLineChart(x_data, data, elementId) {
            let chartLine = echarts.init(document.getElementById(elementId));
            chartLine.setOption({
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['']
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: x_data
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        name: '',
                        type: 'line',
                        stack: '总量',
                        data: data,
                        smooth: true
                    }
                ]
            });
        },
        drawLineChart2(userSexData) {
            let chartLine = echarts.init(document.getElementById('chartLine3'));
            chartLine.setOption({
                tooltip: {
                    trigger: 'item',
                    // formatter: "{a} <br/>{b}: {c} ({d}%)"
                    formatter: "{b}: {c} ({d}%)"
                },
                legend: {
                    orient: 'vertical',
                    x: 'left',
                    data: ['男', '女']
                },
                series: [
                    {
                        name: '', // 配置来源，会显示在formatter的{a}中，通过改变formatter的配置，可以不显示该属性，见上
                        type: 'pie',
                        radius: ['50%', '70%'],
                        avoidLabelOverlap: false,
                        label: {
                            normal: {
                                show: false,
                                position: 'center'
                            },
                            emphasis: {
                                show: true,
                                textStyle: {
                                    fontSize: '30',
                                    fontWeight: 'bold'
                                }
                            }
                        },
                        labelLine: {
                            normal: {
                                show: false
                            }
                        },
                        data: userSexData
                    }
                ]
            });
        },
        handleClick(tab, event) {
            if (this.activeName === 'first') {
                this.time = [str2date(new Date()), str2date(new Date())]
                this.GetDataCenter();
                this.getNewUserCountList();
                this.getUseCountList();
            } else if (this.activeName === 'second') {
                this.getUserSexCount();
            }
        },
        days1Change() {
            this.getNewUserCountList();
        },
        days2Change() {
            this.getUseCountList();
        },
        days3Change() {
            this.getUserSexCount();
        },
        days4Change() {

        }
    },
}
</script>
<style lang="scss">
.yimaiSmartCart {
    background: #fff;
    min-height: calc(100vh - 150px);
    position: relative;

    .refresh-btn {
        z-index: 999;
        position: absolute;
        top: 20px;
        right: 20px;
        color: #fff;
        height: 32px;
        width: 68px;
        cursor: pointer;
        color: #fff;
        border-radius: 4px;
        text-align: center;
        line-height: 32px;
        background: #51CDCB;
        position: absolute;
    }

    .el-tabs__item {
        height: 74px;
        line-height: 74px;
    }

    .time-select {
        box-sizing: border-box;
        position: absolute;
        top: 10px;
        right: 10px;
        z-index: 999;

        .export {
            height: 32px;
            width: 68px;
            cursor: pointer;
            color: #fff;
            border-radius: 4px;
            text-align: center;
            line-height: 32px;
            background: #51CDCB;
        }
    }

    .page-params {
        border-top: 30px solid #f6f9fa;
        display: flex;
        justify-content: space-between;

        .params-item {
            flex: 1;
            height: 114px;
            background: #fff;
            border-left: 15px solid #f6f9fa;
            border-right: 15px solid #f6f9fa;
            position: relative;
            box-sizing: border-box;
            padding-left: 90px;

            &:nth-child(1) {
                border-left: none;
            }

            &:nth-child(3) {
                border-right: none;
            }

            .icon {
                position: absolute;
                height: 36px;
                left: 30px;

                i {
                    font-size: 36px;
                    line-height: 114px;

                    &.fa-user-plus {
                        color: #24d2b5;
                    }

                    &.fa-user {
                        color: #20AEE3;
                    }

                    &.fa-users {
                        color: #6772e5;
                    }
                }
            }

            .params-item-num {
                padding-top: 30px;
                font-weight: bold;
                height: 36px;
                line-height: 36px;
                font-size: 24px;
                color: #455a64;
            }

            .params-item-name {
                line-height: 16px;
                font-size: 14px;
                color: #bcc3d3;
            }
        }
    }

    .days-select {
        display: flex;
        justify-content: space-between;
        padding: 30px;
        border-top: 30px solid #f6f9fa;
    }

    .page-echarts {
        background: #fff;
    }

    .sexAndAge {
        display: flex;

        .page-echarts {
            border-top: none;

            &:nth-child(1) {
                flex: 3;
            }

            &:nth-child(2) {
                flex: 5;
            }
        }
    }
}
</style>
